<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吴彦祖</title>
    <style>
        .top {
            width: 80%;
            height: 100px;
            margin: 0px 10%;
            background-color: #5f9fff;
            color: white;
            /* 设置顶部盒子top宽度为浏览器的80% 高度为100px 上下边距为0 左右边距为10%(于浏览器页面内居中) 背景色为淡蓝色 字体颜色为白色 */
        }

        .body {
            width: 80%;
            height: auto;
            margin: 0px 10%;
            background-color: #f2f2f2;
            /* 设置body盒子宽度为80% 高度为自适应(随内部元素改变高度) 上下边距为0 左右边距为10% 背景色为淡灰 */
        }

        .bodyTop {
            height: 100px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            /* body顶部导航栏(基本信息、早年经历...)样式为 高度为100px 使用flex布局 横向排列 上下居中 水平居中 */
        }

        .laber {
            width: 150px;
            height: 40px;
            border-radius: 0 15px 0 15px;
            background-color: #5f9fff;
            font-size: 24px;
            text-align: center;
            line-height: 40px;
            margin: 0 5px;
            /* 顶部导航栏盒子样式：宽度150px 高度40px 盒子边框设置右上和左下圆角 背景色为淡蓝 字体大小为24px 文字居中显示 行高为40px(与盒子高度相等，文字上下居中)  上下边距为0 左右边距为5px (每个盒子的左右都是5px 两个盒子之间距离为10px)*/
        }

        .laber a {
            color: white;
            text-decoration: none;
            /* 导航栏字体颜色为白色 字体装饰为 无 (常用于取消下划线) */

        }

        .see {
            height: 350px;
            margin: 0px 10%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            /* 图片和视频盒子 高度为350px 上下边距为0 左右间距为10% 使用flex布局 横向排列 上下居中 水平居中 */
        }

        .bottom {
            width: 80%;
            height: 100px;
            margin: 0px 10%;
            background-color: #5f9fff;
            color: white;
            text-align: center;
            line-height: 100px;
            /* 底部盒子 宽度为父盒子(浏览器)的80% 高度为100px 上下边距为0 左右间距为10% 背景色为淡蓝色 字体颜色为白色 文字水平居中 上下居中 */
        }
    </style>
</head>

<body>
    <div>
        <div class="top">
            <!-- class类名为top，由top为此div设置样式 -->
            <span style="font-size: 48px; font-weight: 800; line-height: 100px; margin-left: 80px;">人物简历————吴彦祖</span>
            <!-- 字体样式：字号为48px，字体加粗，行高设置100px，与div高度相同，文字上下居中 ，span左边距80px，文字左侧距离盒子边缘为80px -->
        </div>

        <div class="body">
            <!-- class类名为body，由body为此div设置样式 -->

            <div class="bodyTop">
                <div class="laber">
                    <a href="#t1">基本信息</a>
                    <!-- href为#t1，点击后跳转至本页面内id为t1的标签位置处 -->
                </div>
                <div class="laber">
                    <a href="#t2">早年经历</a>
                </div>
                <div class="laber">
                    <a href="#t3">演艺经历</a>
                </div>
                <div class="laber">
                    <a href="#t4">获奖记录</a>
                </div>
                <div class="laber">
                    <a href="#t5">社会活动</a>
                </div>
                <div class="laber">
                    <a href="#t6">联系方式</a>
                </div>
            </div>

            <div class="see">
                <div class="img" style="margin-right: 100px;">
                    <!-- 此div设置右边距为100px，距离右侧盒子为100px -->
                    <img src="../images/wuyanzu/Daniel_Wu.jpg" width="250" title="吴彦祖">
                    <!-- img设置图片为原始纵横比 宽度为250px 当鼠标移至图片上方，显示文字：吴彦祖 -->
                </div>
                <div class="mov">
                    <video src="../images/wuyanzu/Daniel_Wu.mp4" controls="controls" height="346"
                        title="吴彦祖"></video>
                    <!-- controls无意义，提供播放控件 video设置高度为346px(与img高度相等) 当鼠标移至图片上方，显示文字：吴彦祖 -->
                </div>
            </div>

            <div class="read" style="width: 90%; margin: 0 5%;">
                <!-- 此div设置样式为 宽度为body盒子宽度的90% 上下边距为0 左右边距为5%(在body盒子中居中) -->
                <h1 id="t1">基本信息</h1>
                <!-- 第一个锚点，当点击href为#t1的链接时，跳转至此位置 -->
                <p style="text-indent: 2em;">
                    <!-- 首行缩进2个字符 -->
                    吴彦祖（DanielWu），1974年9月30日出生于美国旧金山，华语影视男演员、导演、制片人，毕业于美国俄勒冈大学。1998年，因出演个人首部电影作品《美少年之恋》进入演艺圈；同年，凭借文艺片《玻璃之城》提名第18届香港电影金像奖最佳新演员。2001年，主演文艺片《游园惊梦》。2003年，首次担任监制并主演了惊悚片《妖夜回廊》，凭该片首次提名第40届台湾电影金马奖最佳男主角。2004年，因出演动作片《新警察故事》中关祖一角受到广泛关注，并凭借该角色获得第41届台湾电影金马奖最佳男配角奖。2005年，凭借动作片《旺角黑夜》首次提名第24届香港电影金像奖最佳男主角。
                </p>

                <h1 id="t2">早年经历</h1>
                <!-- 第二个锚点，当点击href为#t2的链接时，跳转至此位置 -->
                <p style="text-indent: 2em;">
                    <!-- 首行缩进2个字符 -->
                    吴彦祖出生于加利福尼亚州伯克利，并在奥林达长大。6岁时，吴彦祖在看完功夫电影《少林寺》后，对武术产生了兴趣。11岁时，吴彦祖便拜一名北京艺人为师开始习武，教他的师父是吴彦祖的母亲找的，而此前，他的母亲还担心他学会了功夫跟人打架，但最后还是拗不过他对习武的热情。高中时，吴彦祖也曾叛逆过，经常在街上玩滑板，听的是朋克、重金属、饶舌等地下音乐，喜欢打架更甚于学习。这一切直至他的母亲因心脏病住院才有了彻底的改变。在母亲生病期间，吴彦祖白天在学校认真读书，下课后就到医院陪母亲。为此他甚至去学习了简单的气功疗法，用来辅助母亲的治疗。
                </p>
                <p style="text-indent: 2em;">1993年，吴彦祖在美国俄勒冈大学攻读建筑系，并获得建筑副修奖学金。1994年，吴彦祖赢得California Martial Art
                    Competitions的亚军，并在美国西岸排名第二位。同时，吴彦祖还成立了俄勒冈大学中国武术学会，并成为第一任教练，收了二十几个徒弟，一共教了五年。1995年，吴彦祖随师父到北京什刹海武校参加集训，并获得了北京国际武术比赛长拳组第五名，太极拳组第六名。
                </p>
                <p style="text-indent: 2em;">
                    1997年，毕业后的吴彦祖前往香港旅行，后在姐姐的建议下开始当模特。四个月后，导演杨凡在看到吴彦祖拍摄的服装广告后，与他接洽成为他下一部电影的演员，而吴彦祖表示自己没有表演经验而拒绝了。后来杨凡天天给吴彦祖打电话并说服了他。
                </p>

                <h1 id="t3">演艺经历</h1>
                <table border="1" align="center" cellspacing="0">
                    <!-- 设置表格 边框宽度为 1 于body盒子内居中显示 各个表格的间距设置为0 -->
                    <tr>
                        <th width="100px">时期</th>
                        <!-- 设置左侧表格宽度为100px -->
                        <!-- th为表头标签，默认显示为 加粗 居中 显示 -->
                        <th>经历</th>
                    </tr>
                    <tr>
                        <td style="text-align: center;">1998年</td>
                        <!-- 设置左侧表格文字居中显示 -->
                        <td>吴彦祖被杨凡导演选中，接拍了个人首部电影作品《美少年之恋》</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">1999年</td>
                        <td>吴彦祖与成龙、舒淇合作主演的爱情喜剧片《玻璃樽》上映</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">2000年</td>
                        <td>首次与林超贤导演合作，并出演了警匪动作片《重装警察》</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">2001年</td>
                        <td>首次与古天乐合作，并出演了动作片《野兽之瞳》</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">2002年</td>
                        <td>吴彦祖与杨千嬅首次合作，并出演了爱情喜剧片《新扎师妹》</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">2003年</td>
                        <td>再次与杨千嬅合作出演了喜剧片《新扎师妹2》</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">2004年</td>
                        <td>与张柏芝合作，出演由尔冬升执导的动作剧情片《旺角黑夜》</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">2005年</td>
                        <td>吴彦祖与梁家辉、郑秀文合作，主演了根据同名小说改编的爱情片《长恨歌》</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">2006年</td>
                        <td>吴彦祖执导并担任编剧的个人电影处女作《四大天王》上映</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">2007年</td>
                        <td>吴彦祖与尔冬升导演合作的犯罪剧情片《门徒》上映</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">2009年</td>
                        <td>与成龙合作主演的动作片《新宿事件》上映</td>
                    </tr>
                </table>

                <h1 id="t4">获奖记录</h1>
                <p style="text-indent: 2em;">作业: 请参照
                    <a href="https://baike.baidu.com/item/%E5%90%B4%E5%BD%A6%E7%A5%96/182990?fr=aladdin#6"
                        target="_blank">吴彦祖百度百科</a>
                    <!-- a超链接标签 点击跳转网址为 百度百科 target 属性为 _blank 点击后从新窗口显示新的网页 -->
                    完成获奖记录的表格
                </p>

                <h1 id="t5">社会活动</h1>
                <p style="text-indent: 2em;">2006年底，在中国香港“SuperStars”影展及摄影集慈善义卖活动上，余文乐、吴彦祖、郭富城等300多位明星为慈善活动所拍摄的裸照曝光。</p>
                <p style="text-indent: 2em;">2008年6月4日，吴彦祖录制爱心视频并参与了周迅发起的“星星之火，传爱四川”行动。</p>
                <p style="text-indent: 2em;">
                    2009年2月，吴彦祖为四川地震灾区彭州小鱼洞的群众修建永久性房屋；5月10日，吴彦祖参加了“壹家人壹起走——纪念5.12汶川行”活动；7月6日，吴彦祖向四川地震灾区出资捐建5间房屋，并且表示每年都会抽出几次时间去四川探访；9月20日，吴彦祖携手吴君如在香港出席了“仁人家园义工周”的公益活动。
                </p>
                <p style="text-indent: 2em;">2013年11月1日，“2014爱·家庭慈善月历”在香港推出，包括吴彦祖等在内的12个明星家庭齐心推动此公益活动。</p>

                <h1 id="t6">联系方式</h1>
                <p style="text-indent: 2em;">请将你想告诉我的话发送至我的邮箱:</p>
                <textarea style="width: 100%; height: 100px;"></textarea><br>
                <!-- 文本域标签 textarea 设置宽度为父盒子的100% 高度为100px -->
                <button>提交</button><br><br>
                <!-- 按钮标签 button -->
            </div>

            <div class="link" style="text-align: center; padding-bottom: 20px;">
                <!-- 样式为 居中显示 底部填充20px(与margin-bottom 外边距不同 这里不建议使用外边距 设置下方边距) -->
                <!-- 可自行设置边框 border: 1px solid black; 查看 外边距 和 内填充 的区别 -->
                <a href="#">返回顶部</a>
                <!-- 此代码可以当作 返回顶部 使用，但不建议，当没有确定跳转路径时，可以将href设置为#，点击后会返回到页面顶部(不会刷新页面) -->
                <!-- 以后写代码时，如果出现了不能确定跳转路径，但不想让页面回到顶部可以使用<a href="javascript:void(0)">点击</a> -->
                <!-- <a href="#" onclick="window.close()">关闭</a>  此代码控制点击后会关闭当前页面-->

            </div>
        </div>

        <div class="bottom">
            <span>&copy;2021 Baidu 使用百度前必读 | 百科协议 | 隐私政策 | 百度百科合作平台 | 京ICP证030173号 </span>
            <!-- &copy;为特殊符号 ©  -->
        </div>
    </div>
</body>

</html>